---
type: tutorial
title: Crear un archivo de entradas de blog
i18nReady: true
description: |-
  Tutorial: Construye tu primer blog de Astro -
  Utiliza Astro.glob() para acceder a los datos de los archivos de tu proyecto
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';



Ahora que ya tienes unas cuantas entradas de blog a las que enlazar, ¡es hora de configurar la página Blog para que cree una lista de ellas automáticamente!

<PreCheck>
  - Acceder a los datos de todos tus puestos a la vez utilizando `Astro.glob()`.
  - Mostrar una lista de entradas generada dinámicamente en la página del blog
  - Refactorizar para utilizar un componente `<BlogPost />` para cada elemento de la lista
</PreCheck>

## Muestra dinámicamente una lista de entradas

1. Añade el siguiente código a `blog.astro` para devolver información sobre todos tus archivos Markdown. `Astro.glob()` devolverá un array de objetos, uno por cada entrada del blog.

    ```astro title="src/pages/blog.astro" ins={3}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mi blog de aprendizaje de Astro";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Aquí es donde publicaré sobre mi viaje de aprendizaje de Astro.</p>
      <ul>
        <li><a href="/posts/post-1/">Publicación 1</a></li>
        <li><a href="/posts/post-2/">Publicación 2</a></li>
        <li><a href="/posts/post-3/">Publicación 3</a></li>
      </ul>
    </BaseLayout>
      ```


2. Para generar toda la lista de entradas dinámicamente, utilizando los títulos y las URL de las entradas, sustituye las etiquetas `<li>` individuales por el siguiente código de Astro:

    ```astro title="src/pages/blog.astro" del={9,10,11} ins={13}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mi blog de aprendizaje de Astro";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Aquí es donde publicaré sobre mi viaje de aprendizaje de Astro.</p>
      <ul>
        <li><a href="/posts/post-1/">Publicación 1</a></li>
        <li><a href="/posts/post-2/">Publicación 2</a></li>
        <li><a href="/posts/post-3/">Publicación 3</a></li>

        {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
      </ul>
    </BaseLayout>
    ```

    La lista completa de entradas de tu blog se genera ahora dinámicamente, mapeando sobre el array devuelto por `Astro.glob()`.

3. Añade una nueva entrada de blog creando un nuevo archivo `post-4.md` en `src/pages/posts/` y añadiendo algo de contenido Markdown. Asegúrate de incluir al menos las propiedades frontmatter utilizadas a continuación.

    ```markdown
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: Mi cuarta entrada en el blog
    author: Alumno de Astro
    description: "Esta entrada aparecerá sola!"
    image: 
      url: "https://docs.astro.build/default-og-image.png"
      alt: "La palabra 'astro' contra una ilustración de planetas y estrellas."
    pubDate: 2022-08-08
    tags: ["astro", "éxitos"]
    ---
    Esta entrada debería aparecer con las demás entradas de mi blog, porque `Astro.glob()` está devolviendo una lista de todas mis entradas para crear mi lista.
    ```

4. Vuelve a visitar la página de tu blog en la vista previa de tu navegador en `http://localhost:4321/blog` y busca una lista actualizada con cuatro elementos, incluida tu nueva entrada de blog

<Box icon="puzzle-piece">

## Desafío: Crea un componente BlogPost

Intenta por tu cuenta realizar todos los cambios necesarios en tu proyecto de Astro para que puedas utilizar el siguiente código para generar tu lista de entradas de blog:

```astro title="src/pages/blog.astro" del={2} ins={3}
<ul>
  {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>
```

<details>
<summary>Ampliar para ver los pasos</summary>

1. Crear un nuevo componente en `src/components/`.

    <details>
    <summary>Mostrar el nombre del archivo</summary>
    ```
    BlogPost.astro
    ```
    </details>

2. Escribe la línea de código en tu componente para que pueda recibir un `title` y una `url` como `Astro.props`.

    <details>
    <summary>Mostrar el código</summary>
    ```astro
    ---
    // src/components/BlogPost.astro
    const { title, url } = Astro.props;
    ---
    ```
    </details>

3. Añade la plantilla utilizada para crear cada elemento de la lista de entradas de tu blog.

    <details>
    <summary>Mostrar el código</summary>
    ```astro
    <!-- src/components/BlogPost.astro -->
    <li><a href={url}>{title}</a></li>
    ```
    </details>

4. Importa el nuevo componente a tu página Blog.

    <details>
    <summary>Mostrar el código</summary>
    ```astro title="src/pages/blog.astro" ins={3}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import BlogPost from '../components/BlogPost.astro';
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mi blog de aprendizaje de Astro";
    ---
    ```
    </details>

5. Compruébalo tu mismo: mira el código del componente terminado.

    <details>
    <summary>Mostrar el código</summary>
    ```astro title="src/components/BlogPost.astro"
    ---
    const { title, url } = Astro.props
    ---
    <li><a href={url}>{title}</a></li>
    ```
    ```astro title="src/pages/blog.astro" ins={3,10}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import BlogPost from '../components/BlogPost.astro';
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Mi blog de aprendizaje de Astro"
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Aquí es donde publicaré sobre mi viaje de aprendizaje de Astro.</p>
      <ul>
        {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
      </ul>
    </BaseLayout>
    ```
    </details>
</details>
</Box>



<Box icon="question-mark">

### Pon a prueba tus conocimientos

Si tu componente de Astro contiene la siguiente línea de código: 

```astro
---
const myPosts = await Astro.glob('../pages/posts/*.md');
---
```

Elige la sintaxis que podrías escribir para representar:

1. El título de la tercera entrada de tu blog.  

    <MultipleChoice>
      <Option>
        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
      </Option>
      <Option isCorrect>
        `myPosts[2].frontmatter.title`
      </Option>
      <Option>
        `<a href={myPosts[0].url}>¡¡Primera publicación!!</a>`
      </Option>
    </MultipleChoice>

2. Un enlace a la URL de tu primera entrada en el blog. 

    <MultipleChoice>
      <Option>
        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
      </Option>
      <Option>
        `myPosts[2].frontmatter.title`
      </Option>
      <Option isCorrect>
        `<a href={myPosts[0].url}>¡¡Primera publicación!!</a>`
      </Option>
    </MultipleChoice>

3. Un componente para cada entrada, que muestra la fecha de su última actualización.

    <MultipleChoice>
      <Option isCorrect>
        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
      </Option>
      <Option>
        `myPosts[2].frontmatter.title`
      </Option>
      <Option>
        `<a href={myPosts[0].url}>¡¡Primera publicación!!</a>`
      </Option>
    </MultipleChoice>

</Box>

## Checklist

<Box icon="check-list">

<Checklist>
- [ ] Puedo consultar datos de mis archivos locales.
- [ ] Puedo mostrar una lista de todas las entradas de mi blog.
</Checklist>
</Box>

### Recursos

- [`Astro.glob()` Documentación API](/es/reference/api-reference/#astroglob)
